<template>
  <div>
    <el-form ref="form" :model="form" label-width="80px">
      <el-form-item label="名字">
        <el-input v-model="form.name"></el-input>
      </el-form-item>
      <el-form-item label="电话">
        <el-input v-model="form.telphone"></el-input>
      </el-form-item>
      <el-form-item label="年龄">
        <el-input v-model="form.age"></el-input>
      </el-form-item>
      <el-form-item label="地址">
        <el-input v-model="form.address"></el-input>
      </el-form-item>
      <el-form-item label="班级">
        <el-input v-model="form.uclass"></el-input>
      </el-form-item>
      <el-form-item label="性别">
        <el-radio-group v-model="form.gender">
          <el-radio label="男"></el-radio>
          <el-radio label="女"></el-radio>
        </el-radio-group>
      </el-form-item>
      <el-form-item label="图片">
        <el-button   @click="adduser">
          <img id="up" :src="form.imgUrl" alt="点我上传识别图" />
       </el-button> 
      </el-form-item>
      <el-form-item label="个人介绍">
        <el-input type="textarea" v-model="form.infor"></el-input>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="onSubmit">立即创建</el-button>
        <el-button>取消</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
import { listSearchMixin } from "@/config";

export default {
  mixins: [listSearchMixin],
  name: "",
  data() {
    //这里存放数据
    return {
      form: {
        name: "",
        age: "",
        telphone: "",
        uclass: "",
        gender: false,
        infor: "",
        address: "",
        imgUrl: "",
      },
    };
  },
  methods: {
    adduser() {
      let params = {
        url: "http://localhost:8070/upload",
        method: "post"
      };

      this.sendReq(params, (res) => {
        console.log(res)
        this.form.imgUrl = res.url;
      });
    },

    onSubmit() {
      console.log("submit!");
      let params = {
        url: "http://localhost:8070/user",
        method: "post",
        data: this.form,
      };

      this.sendReq(params, (res) => {
        console.log(res);
        if (res) {
          alert("添加成功");
        }
      });
    },
  },
  //生命周期 - 创建完成（可以访问当前this实例）
  created() {},
};
</script>
